<template>
    <div class="login-container login-container--new">
      <div class="login">
          <div class="logo">
            <div style="width: 100vw">
              <div class="left">
                <div class="logo-7moor">
                  <img :src="src"  v-if="src" class="icon">
                </div>
              </div>
              <div class="center" style="position: absolute;right: 316px">
                <span style="padding-right: 30px" v-if="oemInfo && oemInfo.phone">{{this.$t('oem.phone') + oemInfo.phone}}</span>
                <span v-if="oemInfo && oemInfo.email">{{this.$t('oem.email') + oemInfo.email}}</span>
              </div>
              <i18n class="i18n" v-if="!loading"
                    style="right: 220px;"
                    @changeLang="changeLang">
              </i18n>
              <div class="oem-plan">
                <a class="soft_phone_download" style="color: #666;text-decoration: underline;margin-right: 14px;" v-if="oemInfo && oemInfo.softPhoneDownloadAdd && oemInfo.softPhoneDownloadAdd !== ''" :href="oemInfo.softPhoneDownloadAdd" target="_blank">{{$t('login.downloadSoftphone')}}</a>
                <a style="color: #666;text-decoration: underline" v-if="oemInfo && oemInfo.kfOperateGuideDownload && oemInfo.kfOperateGuideDownload !== ''" :href="oemInfo.kfOperateGuideDownload" target="_blank">{{$t('login.downloadOperaHelp')}}</a>
              </div>
            </div>
          </div>
          <div id="loginNotify" style="display: none">
            <iframe src="https://www.7moor.com/kflogin"></iframe>
          </div>
          <el-row class="login-box">
            <login-index :isOem="isOem" ref="login"></login-index>
          </el-row>
          <el-row class="footer" style="text-align: center;margin-top: 25px">
            <span v-html="oemInfo && oemInfo.footer" class="oem-footer"></span>
          </el-row>
        <!-- 浏览器推荐 -->
          <browser></browser>
          <!-- <v-editor></v-editor> -->
        <el-dialog
          custom-class="verify_dialog"
          :visible.sync="verifyShow"
          width="402px"
          :show-close="false"
          :close-on-click-modal="false">
          <verifyBox
            class="verify_box"
            @success="verifyAlert('success')"
            @error="verifyAlert('error')"
            :type="4"
            :imgUrl="'/img/'"
            :imgName="['1.jpg', '2.jpg']"
            :vSpace="5"
          ></verifyBox>
        </el-dialog>
      </div>
    </div>
</template>

<script>
import I18n from '../../I18nSelect'
import eleLocaleZhCN from 'element-ui/lib/locale/lang/zh-CN'
import eleLocaleZhTW from 'element-ui/lib/locale/lang/zh-TW'
import eleLocaleEn from 'element-ui/lib/locale/lang/en'
import Browser from '../../Browser'
import verifyBox from '@/components/public-modules/verify/index'
import Vue from 'vue'
// import Email from './Email'
// import Phone from './Phone'
import LoginIndex from '../../login.vue'
import * as types from '@/store/mutation-types.js'
// import IdentifyCode from './IdentifyCode'
// import Editor from '../../ui-modules/editor/Editor'
export default {
  name: 'login-gzdx',
  components: {
    LoginIndex,
    Browser,
    I18n,
    verifyBox
  },
  data () {
    return {
      isOem: true,
      notify: {},
      notifyFlag: false,
      loading: true,
      count: 0
    }
  },
  computed: {
    src () {
      let oemObj = this.$store.state.oemObj
      if (oemObj.oemInfo) {
        return oemObj.oemInfo.fileName
      }
    },
    oemInfo () {
      let oemObj = this.$store.state.oemObj
      if (oemObj.oemInfo) {
        return oemObj.oemInfo || {}
      }
    },
    verifyShow () {
      return this.$store.state.verifyShow
    }
  },
  methods: {
    verifyAlert (data) {
      // window.alert(data)
      if (data === 'success') {
        this.$store.commit(types.SET_VERIFY_SHOW, false)
      }
    },
    fetchData (lang, count = 0) {
      console.log(this.$store.state)
      let langTemp = ''
      if (!lang) {
        this.loading = false
        return null
      } else {
        langTemp = lang
      }
      let url = window.location.origin + '/static/i18n/locales/' + langTemp + '.json'
      let urlConfig = window.location.origin + '/static/i18n/locales/' + langTemp + '_Config.json'
      Promise.all([
          window.fetch(url + '?_=' + Math.random(), {
          method: 'get',
          headers: {
            'Content-Type': 'application/json'
          }
        }),
        window.fetch(urlConfig + '?_=' + Math.random(), {
          method: 'get',
          headers: {
            'Content-Type': 'application/json'
          }
        })
      ]).then(([response1, response2]) => {
        Promise.all([response1.json(), response2.json()])
        .then(([res1, res2]) => {
            let locales = ''
            switch (langTemp) {
              case 'zh_CN':
                locales = {...res1, ...res2, ...eleLocaleZhCN}
                this.$store.commit('SET_LABEL_POSITION', 'left')
                break
              case 'zh_TW':
                locales = {...res1, ...res2, ...eleLocaleZhTW}
                this.$store.commit('SET_LABEL_POSITION', 'left')
                break
              case 'en':
                locales = {...res1, ...res2, ...eleLocaleEn}
                this.$store.commit('SET_LABEL_POSITION', 'top')
                break
              default:
                locales = {...res1, ...res2, ...eleLocaleZhCN}
                this.$store.commit('SET_LABEL_POSITION', 'top')
                break
            }
            document.title = `${locales.routeI18n.login} - ${locales.login.cloudService}`
            this.$router.afterEach((route) => {
              let title = route.meta.title || ''
              document.title = `${locales.routeI18n[title]} - ${locales.login.cloudService}`
            })
            Vue.set(Vue.config, 'lang', langTemp || 'zh_CN')
            this.$i18n.setLocaleMessage(lang || 'zh_CN', locales)
            this.$i18n.locale = lang
            window.langJson = {...res1, ...res2} || {}
            this.loading = false
          }).catch(() => {
          if (this.count < 3) {
            this.fetchData(lang, this.count++)
          } else {
            window.alert('Network anomaly！！！ Please check your network')
          }
        })
      })
    },
    changeLang (lang) {
      this.$refs.login.changeLang(lang)
      this.fetchData(lang)
    }
  },
  mounted () {
  },
  beforeMount () {
    this.fetchData()
  }
}
</script>
<style lang="stylus" scoped>
    @import "../../styl/_login"
    @import "../../../../../assets/common.styl"
    .oem-plan
      position: absolute;
      width 200px
      right: 20px;
      top: 22px;
    .login-container
      height 100vh
      -webkit-user-select none
      background-color #f9fafb
    h1
    h2
      font-weight normal
    a
      color  $c-main
    .login
      font-size 12px
      width 100%
      height 100%
      display flex
      justify-content center
      align-items center
      flex-direction column
      .notify
        position: absolute;
        top: 65px;
        color: #1a1a1a;
        text-align: center;
        background-color: #b2daff;
        width: 100%;
        min-width 1200px
        z-index 104
        .notify-a
          margin-left: 10px;
          color #fff
          background-color #459ae9
          border-radius: 4px;
          padding: 2px 7px;
        .content
          font-size 14px
          padding: 10px;
          margin-right: 50px;
        .close
          position: absolute;
          top: 8px;
          right: 30px;
          font-size: 14px;
          color #fff
      .logo
        min-width: 1200px;
        height: 60px;
        position: absolute;
        top: 0px;
        background-color: #feffff;
        z-index 1000
        box-shadow: 0px 1px 2px #ccc;
        .left
          position absolute
          left 120px
          cursor default
          .icon
            max-width 100%
            max-height 100%
          .title
            font-size: 16px;
            color: #666;
            margin-left: 40px;
            margin-top: 20px;
          .logo-7moor
            width: auto;
            height: 40px;
            margin-top: 10px;
            float left
        .center
          position: absolute;
          right: 250px;
          top: 22px;
          color #666
          -webkit-user-select: text;
          -moz-user-select: text;
          -ms-user-select: text;
          user-select: text;
    .login-box
      position: relative;
      padding-top: 100px;
    .vertical-line
        position absolute
        display inline-block
        height 295px
        width 1px
        top 0px
        left 463px
        background-color $cf-white

  .login-tip-size
    height 14px
    .active
      display block

  .ml
    margin-left: 80px
  .i18n
    position absolute
    top 12px
    right 20px
    width 90px
</style>
